<template>
	<view class="container">
		<view class="search">
			<view @click="gotoSeach()" class="input jhx_bg1">
				<image class="icon"></image>
				<text class="txt jhx_f1">商品搜索, 共{{goodsCount}}款供您选择...</text>
			</view>
		</view>
		<swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
			<swiper-item v-for="(item,index) in banner" :key="index">
				<!-- <view url="{{item.link}}"> -->
				<image :src="item.url" background-size="cover"></image>
				<!-- </view> -->
			</swiper-item>
		</swiper>
		<view class='news acea-row row-between-wrapper'>
			<view class='pictrue'>
				<image src='/static/images/news.png'></image>
			</view>
			<view class='swiperTxt'>
				<swiper :indicator-dots="indicatorDots" autoplay="true" interval="2500" duration="500" vertical="true" circular="true">
					<swiper-item catchtouchmove='catchTouchMove' v-for=" (item,index) in  articles" :key="index">
						<view hover-class="none" @click="gotoArticle(item.id)" class='acea-row row-between-wrapper'>
							<view class='text acea-row row-between-wrapper'>
								<view class='label border2' v-if="index == 0">最新</view>
								<view class='newsTitle line1 jhx_f3'>{{item.title}}</view>
							</view>
							<view class='iconfont icon-xiangyou'></view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>


		<view class="m-menu jhx_bg0">
			<view hover-class="none" class="item" @click="gotoCategory(item.id)" v-for="(item,index) in channel" :key="index">
				<image :src="item.iconUrl" background-size="cover"></image>
				<text class="jhx_f2">{{item.name}}</text>
			</view>
			<view hover-class="none" class="item" @click="gotoCatalog()">
				<image src="/static/images/channel_category.png" background-size="cover"></image>
				<text class="jhx_f2">更多分类</text>
			</view>
		</view>

		<view class="a-section a-groupon" v-if="groupons.length > 0">
			<view class='title acea-row row-between-wrapper'>
				<view class='text'>
					<view class='name jhx_f4'>团购专区</view>
					<view class='jhx_f5'>邀请好友一起团购,享受折扣减免</view>
				</view>
				<view class='more jhx_f6' hover-class="none"  @tap="gotoGrouponList">更多<text class='iconfont icon-jiantou'></text>
				</view>
			</view>

			<view class="b">
				<view class="item" v-for=" (item,index) in groupons" :key="index">
					<view @click="gotoGoods(item.goods.id)">
						<image class="img" :src="item.goods.picUrl" background-size="cover"></image>
						<view class="right">
							<view class="text">
								<view class="header">
									<text class="name jhx_f7">{{item.goods.name}}</text>
									<view class="capsule-tag">
										<zan-capsule color="#e67249" leftText="团购" :rightText="item.groupon_member" />
									</view>
								</view>
								<text class="desc jhx_f5">{{item.goods.brief}}</text>
								<view class="price">
									<view class="priceTg jhx_f8">
										<text class="jhx_f9">团购价</text>￥{{item.groupon_price}}
									</view>
									<view class="counterPrice jhx_f9">￥{{item.goods.counterPrice}}</view>
									<view class="brokerage" v-if="isAgent && item.goods.brokeragePrice>0.01">赚￥{{item.goods.brokeragePrice}}</view>
									<view class="brokerage" v-else>立即参团</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="a-section a-topic" wx:if="topics.length > 0">
			<view class="h">
				<view>
					<view url="/pages/topic/topic">
						<text class="txt jhx_f4">活动专场</text>
					</view>
				</view>
			</view>
			<view class="b">
				<scroll-view scroll-x class="list">
					<view class="item" v-for="(item,index) in topics" :key="index">
						<view @click="gotoTopicDetail(item.id)">
							<image class="img" :src="item.picUrl" background-size="cover"></image>
							<view class="np">
								<text class="name jhx_f7">{{item.title}}</text>
								<text class="price jhx_f8">￥{{item.price}}元起</text>
							</view>
							<text class="desc jhx_f5">{{item.subtitle}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="a-section a-brand">
			<view class='title acea-row row-between-wrapper'>
				<view class='text'>
					<view class='name jhx_f4'>品牌厂商直供</view>
					<view class='desc jhx_f5'>知名品牌厂商直供，好品质，更优惠</view>
				</view>
				<view class='more jhx_f6' hover-class="none" @tap="gotoBrand()" >更多<text class='iconfont icon-jiantou'></text>
				</view>
			</view>
			<view class="b">
				<view class="item item-1" v-for="(item,index) in brands" :key="index">
					<view @click="gotoBrandDetail(item.id)">
						<view class="wrap">
							<image class="img" :src="item.picUrl" mode="aspectFill"></image>
							<view class="mt">
								<!-- <text class="brand">{{item.name}}</text>
		              <text class="price">{{item.floorPrice}}</text>
		              <text class="unit">元起</text> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="a-section a-new" v-if="newGoods.length > 0">
			<view class='title acea-row row-between-wrapper'>
				<view class='text'>
					<view class='name jhx_f4'>全网 · 新品首发<text class='new font-color'>NEW~</text></view>
					<view class='desc jhx_f5'>全网最新上架上架</view>
				</view>
				<view class='more jhx_f6' hover-class="none" @click="gotoNewGoods()">更多<text class='iconfont icon-jiantou'></text>
				</view>
			</view>
			<view class="b">
				<view class="item" v-for="(item,index) in newGoods" :key="index">
					<view @click="gotoGoods(item.id)">
						<image class="img" :src="item.picUrl" background-size="cover"></image>
						<text class="name jhx_f7">{{item.name}}</text>
						<view class="priceLine">
							<view class="price jhx_f8">￥{{item.retailPrice}}</view>
							<view class="brokerage" v-if="isAgent && item.brokeragePrice>0.01">赚￥{{item.brokeragePrice}}</view>
							<view class="brokerage" v-else>立即购买</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="a-section a-popular" v-if="hotGoods.length > 0">
			<view class='hot-bg'>
				<view class='title acea-row row-between-wrapper'>
					<view class='text'>
						<text class='label'>人气推荐</text>根据销量、搜索、好评等综合得出
					</view>
					<view class='more jhx_f6' hover-class="none" @click="gotoHotGoods">更多<text class="iconfont icon-jiantou"></text></view>
				</view>
			</view>

			<view class="b">
				<view class="item" v-for="( item,index) in  hotGoods" :key="index">
					<view @click="gotoGoods(item.id)">
						<image class="img" :src="item.picUrl" background-size="cover"></image>
						<view class="right">
							<view class="text">
								<text class="name jhx_f7">{{item.name}}</text>
								<text class="desc jhx_f5">{{item.brief}}</text>
								<view class="price">
									<view class="priceTg jhx_f8">￥{{item.retailPrice}}</view>
									<view class="brokerage" v-if="isAgent && item.brokeragePrice>0.01">赚￥{{item.brokeragePrice}}</view>
									<view class="brokerage" v-else>立即购买</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="good-grid" v-for="(item,index) in floorGoods" :key="index">
			<view class="h">
				<text class="jhx_f4">{{item.name}}</text>
			</view>
			<view class="b">
				<block v-for="(iitem,iindex) in item.goodsList" :key="iindex">
					<view class="item" :class="iindex % 2 == 0 ? '' : 'item-b'">
						<view @click="gotoGoods(iitem.id)" class="a">
							<image class="img" :src="iitem.picUrl" background-size="cover"></image>
							<text class="name jhx_f7">{{iitem.name}}</text>
							<view class="price">
								<view class="priceTg jhx_f8">￥{{iitem.retailPrice}}</view>
								<view class="brokerage" v-if="isAgent && iitem.brokeragePrice>0.01">赚￥{{iitem.brokeragePrice}}</view>
								<view class="brokerage" v-else>立即购买</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view @click="gotoCategory(item.id)" class="t">
				<view class="txt jhx_f6">{{'更多'+item.name+'好物 >'}}</view>
			</view>
		</view>
		<coupon-window :window='window' :couponList="couponList" @onColse="onColse"></coupon-window>
	</view>
</template>

<script>
	import coupon from '../../components/coupon-window/coupon-window.vue'
	import zanCapsule from '../../components/zan-capsule/zan-capsule.vue'
	export default {
		components: {
			coupon,
			zanCapsule
		},
		data() {
			return {
				couponList: [],
				newGoods: [],
				hotGoods: [],
				topics: [],
				brands: [],
				groupons: [],
				floorGoods: [],
				banner: [],
				channel: [],
				coupon: [],
				articles: [],
				goodsCount: 0,
				indicatorDots: false,
				window: false,
				colseCoupon: false,
				isAgent: false,
			}
		},
		onShareAppMessage() {
			let userInfo = wx.getStorageSync('userInfo');
			let shareUserId = 1;
			if (userInfo) {
				shareUserId = userInfo.userId;
			}
			console.log('/pages/index/index?shareUserId=' + shareUserId);
			return {
				title: '智怀软件',
				desc: '智怀软件专业uniapp',
				path: '/pages/index/index?shareUserId=' + shareUserId
			}
		},
		onPullDownRefresh() {
			uni.showNavigationBarLoading() //在标题栏中显示加载
			this.getIndexData();
			uni.hideNavigationBarLoading() //完成停止加载
			uni.stopPullDownRefresh() //停止下拉刷新
		},
		onLoad(options) {
			this.colseCoupon = false;

			//如果有分享用户，则设置
			if (options.shareUserId) {
				this.$storage.setStorageSync('shareUserId', options.shareUserId);
			}

			// 页面初始化 options为页面跳转所带来的参数
			if (options.scene) {
				//这个scene的值存在则证明首页的开启来源于朋友圈分享的图,同时可以通过获取到的goodId的值跳转导航到对应的详情页
				var scene = decodeURIComponent(options.scene);
				console.log("scene:" + scene);

				let info_arr = [];
				info_arr = scene.split(',');
				let _type = info_arr[0];
				let id = info_arr[1];

				let shareUserId = null; //默认用户
				if (info_arr.length == 4 && info_arr[2] == 'user') {
					shareUserId = info_arr[3];
				} else if (_type == 'user') {
					shareUserId = id;
				}

				if (shareUserId != null) {
					this.$storage.setStorageSync('shareUserId', id);
				}

				if (_type == 'goods') {
					uni.navigateTo({
						url: '../goods/goods?id=' + id
					});
				} else if (_type == 'groupon') {
					uni.navigateTo({
						url: '../goods/goods?grouponId=' + id
					});
				} else if (_type == 'brand') {
					uni.navigateTo({
						url: '../brandDetail/brandDetail?id=' + id
					});
				} else if (_type == 'topic') {
					uni.navigateTo({
						url: '../topicDetail/topicDetail?id=' + id
					});
				} else if (_type == 'fetchOrder') {
					uni.navigateTo({
						url: '../ucenter/fetchOrderDetail/fetchOrderDetail?id=' + id + '&isShared=1'
					});
				} else {
					uni.navigateTo({
						url: '../index/index'
					});
				}
			}

			// 页面初始化 options为页面跳转所带来的参数
			if (options.grouponId) {
				//这个pageId的值存在则证明首页的开启来源于用户点击来首页,同时可以通过获取到的pageId的值跳转导航到对应的详情页
				uni.navigateTo({
					url: '../goods/goods?grouponId=' + options.grouponId
				});
			}

			// 页面初始化 options为页面跳转所带来的参数
			if (options.goodId) {
				//这个goodId的值存在则证明首页的开启来源于分享,同时可以通过获取到的goodId的值跳转导航到对应的详情页
				uni.navigateTo({
					url: '../goods/goods?id=' + options.goodId
				});
			}

			// 页面初始化 options为页面跳转所带来的参数
			if (options.orderId) {
				//这个orderId的值存在则证明首页的开启来源于订单模版通知,同时可以通过获取到的pageId的值跳转导航到对应的详情页
				uni.navigateTo({
					url: '../ucenter/orderDetail/orderDetail?id=' + options.orderId
				});
			}

			this.getIndexData();
		},
		methods: {
			gotoSeach() {
				uni.navigateTo({
					url: '../search/search'
				})
			},gotoBrand(){
				uni.navigateTo({
					url:'../brand/brand'
				})
			},
			gotoCategory(id) {
				uni.navigateTo({
					url: '../category/category?id=' + id
				})
			},
			gotoGoods(goodsId) {
				uni.navigateTo({
					url: '../goods/goods?id=' + goodsId
				})
			},
			gotoHotGoods() {
				uni.navigateTo({
					url: "../hotGoods/hotGoods"
				})
			},
			gotoNewGoods() {
				uni.navigateTo({
					url: '../newGoods/newGoods'
				})
			},
			gotoBrandDetail(brandId) {
				uni.navigateTo({
					url: '../brandDetail/brandDetail?id=' + brandId
				})
			},
			gotoTopicDetail(topicId) {
				uni.navigateTo({
					url: '../topicDetail/topicDetail?id=' + topicId
				})
			},
			gotoCatalog() {
				uni.switchTab({
					url: '../catalog/catalog'
				})
			},
			gotoArticle(articleId) {
				uni.navigateTo({
					url: '../article/article?id=' + articleId
				})
			},gotoGrouponList(){
				uni.navigateTo({
					url:'../groupon/grouponList/grouponList'
				})
			},
			getIndexData() {

				let that = this;
				that.$util.request(that.$api.api.IndexUrl).then(function(res) {
					console.log(res);
					if (res.errno === 0) {

						that.newGoods = res.data.newGoodsList;
						that.hotGoods = res.data.hotGoodsList;
						that.topics = res.data.topicList;
						that.brands = res.data.brandList;
						that.floorGoods = res.data.floorGoodsList;
						that.banner = res.data.banner;
						that.articles = res.data.articles;
						that.groupons = res.data.grouponList;
						that.channel = res.data.channel;
						that.coupon = res.data.couponList;
					}
				});
				that.$util.request(that.$api.api.GoodsCount).then(function(res) {
					that.goodsCount = res.data.goodsCount;
				});
			}
		}
	}
</script>

<style>
	.banner {
		width: 750rpx;
		height: 312rpx;
	}

	.banner image {
		width: 100%;
		height: 312rpx;
	}

	.m-menu {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding-bottom: 0rpx;
		padding-top: 30rpx;
	}

	.m-menu .item {
		width: 150rpx;
		height: 136rpx;
	}

	.m-menu image {
		display: block;
		width: 64rpx;
		height: 64rpx;
		margin: 0 auto;
		margin-bottom: 16rpx;
	}

	.m-menu text {
		display: block;
		text-align: center;
		margin: 0 auto;
		line-height: 1;
	}

	.a-section {
		width: 750rpx;
		height: auto;
		overflow: hidden;
		background: #fff;
		margin-top: 20rpx;
	}

	.a-section .h {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
		height: 130rpx;
	}

	.a-section .h .txt {
		padding-right: 30rpx;
		background-size: 16.656rpx 27rpx;
		display: inline-block;
		height: 36rpx;
		line-height: 36rpx;
	}

	.a-brand .b {
		width: 750rpx;
		height: auto;
		overflow: hidden;
		position: relative;
	}

	.a-brand .wrap {
		position: relative;
	}

	.a-brand .img {
		position: absolute;
		left: 0;
		top: 0;
	}

	.a-brand .mt {
		position: absolute;
		z-index: 2;
		padding: 27rpx 31rpx;
		left: 0;
		top: 0;
	}

	.a-brand .mt .brand {
		display: block;
		font-size: 33rpx;
		height: 43rpx;
		color: #fff;
	}

	.a-brand .mt .price,
	.a-brand .mt .unit {
		font-size: 25rpx;
		color: #fff;
	}

	.a-brand .item-1 {
		float: left;
		width: 375rpx;
		height: 252rpx;
		overflow: hidden;
		border-top: 1rpx solid #fff;
		margin-left: 1rpx;
	}

	.a-brand .item-1:nth-child(2n+1) {
		margin-left: 0;
		width: 374rpx;
	}

	.a-brand .item-1 .img {
		width: 375rpx;
		height: 253rpx;
	}

	.a-coupon {
		width: 750rpx;
		height: auto;
		overflow: hidden;
	}

	.a-coupon .b .item {
		position: relative;
		height: 220rpx;
		width: 700rpx;
		background: linear-gradient(to right, #d8050f, #e68d08);
		margin-bottom: 10rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		overflow: hidden;
		border-radius: 10rpx;
	}

	.a-coupon .b .item:before,
	.a-coupon .b .item:after {
		content: '.';
		width: 0;
		height: 200%;
		position: absolute;
		top: 20rpx;
	}

	.a-coupon .b .item:before {
		border-right: 20rpx dotted #eeeeee;
		left: -10rpx;
		width: 1rpx;
	}

	.a-coupon .b .item:after {
		border-left: 20rpx dotted #eeeeee;
		right: -10rpx;
	}


	.a-coupon .b .tag {
		margin-left: 40rpx;
		height: 32rpx;
		background: #b8bb12;
		padding-left: 16rpx;
		padding-right: 16rpx;
		position: absolute;
		left: 20rpx;
		color: #fff;
		top: 20rpx;
		font-size: 20rpx;
		text-align: center;
		line-height: 32rpx;
	}

	.a-coupon .b .content {
		margin-left: 40rpx;
		display: flex;
		margin-right: 40rpx;
		flex-direction: row;
	}

	.a-coupon .b .content .left {
		padding-top: 50rpx;
		flex: 1;
		border-right: 2rpx dashed rgba(230, 230, 230, .5);
	}

	.a-coupon .b .discount {
		font-size: 50rpx;
		color: #e9f814;
	}

	.a-coupon .b .min {
		color: #fff;
	}

	.a-coupon .b .content .right {
		padding: 21px 14px;
		width: 430rpx;
	}

	.a-coupon .b .name {
		font-size: 44rpx;
		color: #fff;
		margin-bottom: 14rpx;
	}

	.a-coupon .b .desc {
		font-size: 24rpx;
		color: #fff;
	}

	.a-coupon .b .time {
		font-size: 24rpx;
		color: #fff;
		line-height: 30rpx;
	}

	.couponbg {
		position: absolute;
		left: 20%;
		top: 95rpx;
		height: 290rpx;
		width: 730rpx;
		background-color: rgba(255, 255, 255, .15);
		transform: rotate(-20deg);
	}

	.a-groupon {
		width: 750rpx;
		height: auto;
		overflow: hidden;
	}

	.a-groupon .b .item {
		border-top: 1px solid #d9d9d9;
		margin: 0 20rpx;
		padding-top: 10rpx;
		height: 264rpx;
		vertical-align: middle;
		width: 710rpx;
	}

	.a-groupon .b .img {
		margin-top: 12rpx;
		margin-right: 10rpx;
		float: left;
		width: 220rpx;
		height: 220rpx;
	}

	.a-groupon .b .right {
		float: left;
		height: 244rpx;
		width: 476rpx;
		display: flex;
		flex-flow: row nowrap;
	}

	.a-groupon .b .text {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		justify-content: center;
		overflow: hidden;
		height: 244rpx;
		width: 476rpx;
	}

	.a-groupon .b .name {
		float: left;
		width: 330rpx;
		display: block;
		line-height: 42rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.a-groupon .capsule-tag {
		float: right;
		padding-right: 0rpx;
		padding-top: 8rpx;
	}

	.a-groupon .zan-capsule+.zan-capsule {
		margin-left: 6px;
	}

	.a-groupon .b .desc {
		margin-top: 20rpx;
		width: 476rpx;
		display: block;
		line-height: 38rpx;
	}

	.a-groupon .b .price {
		width: 476rpx;
		display: flex;
		line-height: 50rpx;
	}

	.a-groupon .b .priceTg {
		width: 47%;
	}

	.a-groupon .b .counterPrice {
		margin-left: 10rpx;
		text-decoration: line-through;
		width: 23%;
	}

	.a-new .b {
		width: 750rpx;
		height: auto;
		overflow: hidden;
		padding: 0 31rpx 45rpx 31rpx;
	}

	.a-new .b .item {
		float: left;
		width: 324rpx;
		background: #f9f9f9;
		margin: 11rpx;
	}

	.a-new .b .item-b {
		margin-left: 42rpx;
	}

	.a-new .b .img {
		width: 324rpx;
		height: 324rpx;
	}

	.a-new .b .name {
		text-align: center;
		display: block;
		width: 324rpx;
		height: 42rpx;
		padding: 10rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.a-new .b .price {
		padding-top: 25rpx;
		text-align: left;
		line-height: 30rpx;
		padding-bottom: 25rpx;
		float: left;
	}

	.a-groupon .b .brokerage {
		float: left;
		padding-right: 20rpx;
		padding: 5px;
		line-height: 25rpx;
		background: #e68d08;
		border-radius: 20rpx;
		color: #fff;
		margin: 0rpx;
		text-align: center;
		width: 30%;
	}

	.a-new .b .brokerage {
		float: right;
		padding-right: 20rpx;
		padding: 5px;
		line-height: 25rpx;
		background: #e68d08;
		border-radius: 20rpx;
		color: #fff;
		margin: 8rpx;
		min-width: 120rpx;
		text-align: center;
	}

	.a-popular {
		width: 750rpx;
		height: auto;
		overflow: hidden;
		background: #f4f4f4
	}

	.a-popular .b .item {
		border-bottom: 1px solid #f4f4f4;
		margin: 0 10rpx;
		margin-bottom: -2rpx;
		height: 280rpx;
		width: 690rpx;
	}

	.a-popular .b .img {
		margin-top: 10rpx;
		margin-right: 15rpx;
		float: left;
		width: 230rpx;
		height: 230rpx;
	}

	.a-popular .b .right {
		float: left;
		height: 264rpx;
		width: 436rpx;
		display: flex;
		flex-flow: row nowrap;
	}

	.a-popular .b .text {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		justify-content: center;
		overflow: hidden;
		height: 264rpx;
		width: 436rpx;
	}

	.a-popular .b .name {
		width: 436rpx;
		display: block;
		line-height: 40rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.a-popular .b .desc {
		margin-top: 18rpx;
		width: 436rpx;
		display: block;
		line-height: 38rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.a-popular .b .price {
		margin-top: 18rpx;
		width: 436rpx;
		display: flex;
		line-height: 30rpx;
	}

	.a-popular .b .priceTg {
		width: 65%;
	}

	.a-popular .b .brokerage {
		float: left;
		padding-right: 20rpx;
		padding: 5px;
		line-height: 25rpx;
		background: #e68d08;
		border-radius: 20rpx;
		color: #fff;
		margin: 0rpx;
		text-align: center;
		width: 35%;
	}

	.a-topic .b {
		height: 533rpx;
		width: 750rpx;
		padding: 0 0 48rpx 0;
	}

	.a-topic .b .list {
		height: 533rpx;
		width: 750rpx;
		white-space: nowrap;
	}

	.a-topic .b .item {
		display: inline-block;
		height: 533rpx;
		width: 680.5rpx;
		margin-left: 30rpx;
		overflow: hidden;
	}

	.a-topic .b .item:last-child {
		margin-right: 30rpx;
	}

	.a-topic .b .img {
		height: 387.5rpx;
		width: 680.5rpx;
		margin-bottom: 30rpx;
	}

	.a-topic .b .np {
		height: 55rpx;
		text-align: center;
	}

	.a-topic .b .np .price {
		padding-left: 40rpx;
	}

	.a-topic .b .desc {
		display: block;
		height: 30rpx;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.good-grid {
		width: 750rpx;
		height: auto;
		overflow: hidden;
	}

	.good-grid .h {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
		height: 130rpx;
	}

	.good-grid .b {
		width: 750rpx;
		padding: 0 6.25rpx;
		height: auto;
		overflow: hidden;
	}

	.good-grid .b .item {
		float: left;
		background: #fff;
		width: 365rpx;
		margin-bottom: 6.25rpx;
		height: 452rpx;
		overflow: hidden;
		text-align: center;
	}

	.good-grid .b .item .a {
		height: 452rpx;
		width: 100%;
	}

	.good-grid .b .item-b {
		margin-left: 6.25rpx;
	}

	.good-grid .item .img {
		margin-top: 20rpx;
		width: 302rpx;
		height: 302rpx;
	}

	.good-grid .item .name {
		display: block;
		width: 365.625rpx;
		padding: 0 20rpx;
		overflow: hidden;
		height: 35rpx;
		margin: 11.5rpx 0 22rpx 0;
		text-align: center;
	}

	.good-grid .item .price {
		display: flex;
		width: 365.625rpx;
		height: 50rpx;
		text-align: center;
	}


	.good-grid .b .priceTg {
		width: 50%;
	}

	.good-grid .b .brokerage {
		float: left;
		padding: 5px;
		line-height: 25rpx;
		background: #e68d08;
		border-radius: 20rpx;
		color: #fff;
		margin: 0rpx;
		text-align: center;
		width: 45%;
	}

	.good-grid .t {
		height: 100rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.search {
		height: 100rpx;
		width: 100%;
		padding: 0 30rpx;
		background: #fff;
		display: flex;
		align-items: center;
	}

	.search .input {
		width: 690rpx;
		height: 70rpx;
		border-radius: 20rpx;
		display: flex;
		padding-top: 18rpx;
		padding-left: 20rpx;
		align-items: left;
		vertical-align: middle;
		justify-content: left;
	}

	.search .icon {
		background: url('') center no-repeat;
		background-size: 100%;
		width: 34rpx;
		height: 34rpx;
	}

	.search .txt {
		height: 42rpx;
		line-height: 42rpx;
		padding-left: 10rpx;
	}

	.container .news {
		height: 77rpx;
		border-bottom: 1rpx solid #eee;
		padding: 0 30rpx;
		box-shadow: 0 10rpx 30rpx #f5f5f5;
		background: #fff;
	}

	.container .news .pictrue {
		width: 124rpx;
		height: 28rpx;
		border-right: 1rpx solid #ddd;
		padding-right: 23rpx;
		box-sizing: content-box;
	}

	.container .news .pictrue image {
		width: 100%;
		height: 100%;
	}

	.container .news .swiperTxt {
		width: 523rpx;
		height: 100%;
		line-height: 77rpx;
		overflow: hidden;
	}

	.container .news .swiperTxt .text {
		width: 480rpx;
	}

	.container .news .swiperTxt .text .label {
		font-size: 20rpx;
		color: #ff4c48;
		width: 64rpx;
		height: 30rpx;
		border-radius: 40rpx;
		text-align: center;
		line-height: 28rpx;
		border: 2rpx solid #ff4947;
	}

	.container .news .swiperTxt .text .newsTitle {
		width: 397rpx;
	}

	.container .news .swiperTxt .iconfont {
		font-size: 28rpx;
		color: #888;
	}

	.container .news .swiperTxt swiper {
		height: 100%;
	}

	.container .a-section .title {
		height: 120rpx;
		border-top: 0rpx solid #eee;
		padding-top: 14rpx;
		margin: 0 30rpx;
	}

	.container .a-section .title .text {
		width: 530rpx;
	}

	.container .a-section .title .text .name {
		margin-bottom: 5rpx;
		position: relative;
	}

	.container .a-section .title .text .name .new {
		position: absolute;
		top: 6rpx;
		left: 210rpx;
		font-size: 20rpx;
		font-weight: bold;
	}

	.container .a-section .title .more .iconfont {
		margin-left: 9rpx;
		font-size: 26rpx;
		vertical-align: 3rpx;
	}

	.container .a-section .hot-bg {
		width: 100%;
		height: 215rpx;
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding: 14rpx;
		margin-bottom: 0;
	}

	.container .a-section .hot-bg .title {
		height: 87rpx;
	}

	.container .a-section .hot-bg .title .text {
		width: 575rpx;
		font-size: 24rpx;
		color: #fff;
	}

	.container .a-section .hot-bg .title .text .label {
		font-size: 30rpx;
		font-weight: bold;
		margin-right: 20rpx;
		color: #fff;
	}

	.container .a-section .hot-bg .title .more {
		font-size: 26rpx;
		color: #fff;
	}

	.container .a-section .hot-bg .title .more .iconfont {
		font-size: 25rpx;
		vertical-align: 2rpx;
		margin-left: 10rpx;
		color: #fff;
	}

	.container .a-popular .b {
		width: 96%;
		height: auto;
		border-radius: 20rpx;
		background-color: #fff;
		margin: -100rpx auto 0 auto;
		box-sizing: border-box;
		box-shadow: 0 0 30rpx -10rpx #aaa;
	}
</style>
